<!--省市区组件-->
<template>
  <!-- inline-block | flex | column -->
  <section
   class="mc-province-city-district" style="display: flex; flex-direction: row; justify-content: flex-start"
  >
    <el-form>
      <el-form-item :label="provinceLabel" :label-width="labelWidth">
        <el-select v-bind="mcBind.select" :size="size"
          v-model="c_provinceId"
          placeholder="请选择省份"
          clearable
          :style="`width: ${width}px`"
        >
          <el-option
            v-for="(val, item, index) in c_provinceList"
            :key="index"
            :label="val"
            :value="item"
            @click.native="selectProvince(item, val)"
          >
            {{ val }}
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-form>
      <el-form-item :label="cityLabel" :label-width="labelWidth">
        <el-select v-bind="mcBind.select" :size="size"
          v-model="c_cityId"
          placeholder="请选择城市"
          clearable
          :disabled="!c_province"
          :style="`width: ${width}px`"
        >
          <el-option
            v-for="(val, item, index) in c_cityList"
            :key="index"
            :label="val"
            :value="item"
            @click.native="selectCity(item, val)"
          >
            {{ val }}
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item :label="districtLabel" :label-width="labelWidth">
        <el-select v-bind="mcBind.select" :size="size"
          v-model="c_districtId"
          placeholder="请选择城市"
          clearable
          :disabled="!c_city"
          :style="`width: ${width}px`"
        >
          <el-option
            v-for="(val, item, index) in c_districtList"
            :key="index"
            :label="val"
            :value="item"
            @click.native="selectDistrict(item)"
          >
            {{ val }}
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
export default {
  name: "mc-province-city-district",
  props: {
    dataUrl:[String],
    province: [String],
    provinceId: [String],
    provinceLabel: {
      type: String,
      default: "省份",
    },
    city: [String],
    cityId: [String],
    cityLabel: {
      type: String,
      default: "城市",
    },
    district: [String],
    districtId: [String],
    districtLabel: {
      type: String,
      default: "地区",
    },
    showCity: {
      type: Boolean,
      default: true,
    },
    showDistrict: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "140",
    },
    labelWidth: [String],
    size: [String],
    mcBind: {
      type:Object,
      default:function (){
        return {}
      }
    }
  },
  data() {
    return {
      provinceApi:{},

      c_province: "",
      c_provinceId: "",
      c_provinceList: [],

      c_city: "",
      c_cityId: "",
      c_cityList: [],

      c_district: "",
      c_districtId: "",
      c_districtList: [],
    };
  },
  created() {
    this.initProvinceList();
  },
  watch: {
    province(val) {
      if (!val) {
        this.selectProvince();
      }
    },
    city(val) {
      if (!val) {
        this.selectCity();
      }
    },
    district(val) {
      if (!val) {
        this.selectDistrict();
      }
    },
    c_provinceId(val) {
      if (!val) {
        this.c_province = "";
        this.c_city = "";
        this.c_cityId = "";
        this.c_cityList = [];
        this.c_district = "";
        this.c_districtId = "";
        this.c_districtList = [];
      }
    },
    c_cityId(val) {
      if (!val) {
        this.c_city = "";
        this.c_district = "";
        this.c_districtId = "";
        this.c_districtList = [];
      }
    },
    c_districtId(val) {
      if (!val) {
        this.c_district = "";
      }
    },
  },
  methods: {
    initProvinceList() {
      var request = this.$magicaltool.request;
      request.axios({cache:true,keepUrl:false,$vue:this,url:this.dataUrl,method:"get"}).then(res=>{
        this.provinceApi = res.data;
        this.c_provinceList = this.provinceApi["86"];
        this.refreshData();
      })
    },

    selectProvince(item, val) {
      if (!item) return this.setProvince();
      let name = val;
      let id = item;
      this.setProvince(name, id);
      this.c_cityList = this.provinceApi[id];
      // this.c_cityList = item.cities;
      this.setCity();
      this.c_districtList = [];
      this.setDistrict();
    },

    selectCity(item, val) {
      if (!item) return this.setCity();
      // console.log("===>selectCity",item);
      let name = val;
      let id = item;
      this.setCity(name, id);
      this.c_districtList = this.provinceApi[id];
      // this.c_districtList = item.counties;
      this.setDistrict();
    },

    selectDistrict(item, val) {
      if (!item) return this.setDistrict();
      let name = val;
      let id = item;
      this.setDistrict(name, id);
    },

    refreshData() {
      if(this.provinceId) {
        var province = this.c_provinceList[this.provinceId];
        this.setProvince(province,this.provinceId);
        this.c_cityList = this.provinceApi[this.provinceId];
        if (this.cityId) {
          var city = this.c_cityList[this.cityId];
          this.setCity(city, this.cityId);
          this.c_districtList = this.provinceApi[this.cityId];
          if(this.districtId){
            var district = this.c_districtList[this.districtId];
            this.setDistrict(district, this.districtId);
          }
        }
      }
    },

    setProvince(name = "", id = "") {
      this.c_province = name;
      this.c_provinceId = id;
      this.$emit("update:province", name);
      this.$emit("update:province-id", id);
    },

    setCity(name = "", id = "") {
      this.c_city = name;
      this.c_cityId = id;
      this.$emit("update:city", name);
      this.$emit("update:city-id", id);
    },

    setDistrict(name = "", id = "") {
      this.c_district = name;
      this.c_districtId = id;
      this.$emit("update:district", name);
      this.$emit("update:district-id", id);
    },
  },
};
</script>

<style>
.el-select {
  display: block;
}
</style>
